<template>
  <div class="app-container">
    <div class="button">
      <el-row style="padding-bottom: 1rem">
        <el-col :span="10">
          <span>请选择日期:</span>
          <el-date-picker
            v-model="beginTime"
            type="date"
            style="width:35%"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          {{"-"}}
          <el-date-picker
            v-model="endTime"
            style="width:35%"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>

        <el-col :span="14">
          <div class="grid-content bg-purple-dark">
            <el-button type="primary" size="small" @click="find(currentPage=1)">查找</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column label="员工姓名" align="center">
        <template slot-scope="scope">{{ scope.row.trueName }}</template>
      </el-table-column>
      <el-table-column label="伙伴录入数" align="center">
        <template slot-scope="scope">{{ scope.row.counts }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
  import $ from "@/api/empCount";

  export default {
    data() {
      return {
        findState: false,
        createUserId: "",
        value: "",
        state: 0,
        list: [],
        val: "",
        listLoading: true,
        currentPage: 1,
        pageSize: 10,
        total: 0,
        options: [],
        depId: "",
        beginTime: "",
        endTime: "",
      };
    },
    created() {
      $.partnerCount({
        pageIndex: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        if (res.success) {
          this.list = res.data.list;
          this.total = res.data.total;
          this.listLoading = false;
          // console.log(res.data)
        }
      })

    },
    methods: {
      find(pageIndex) {
        if (!this.validate()) return;
        this.listLoading = true;
        this.list = [];
        $.partnerCount({
          beginTime: this.beginTime,
          endTime: this.endTime,
          pageIndex: pageIndex,
          pageSize: this.pageSize
        }).then(res => {
          if (res.success) {
            this.list = res.data.list;
            this.total = res.data.total;
            this.listLoading = false;
            // console.log(res.data)
          }
        })
      },
      validate() {
        let error = "";
        if (this.beginTime==""&&this.endTime!=""||this.beginTime!=""&&this.endTime==""||this.beginTime!=""&&this.endTime!=""&&this.beginTime >= this.endTime) {
          error = "请输入正确的时间范围\n";
          this.beginTime = ""
          this.endTime = ""
        }
        if (error) {
          this.$message({
            message: error,
            type: "error"
          });
          return false;
        }
        return true;
      },

      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1;
        if (this.state == 1) {
          this.find(this.currentPage);
        } else this.find(this.currentPage);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        //console.log(val)
        if (this.state == 1) {
          this.find(this.currentPage);
        } else this.find(this.currentPage);
      },
    }
  };
</script>
